'use strict';
import React from 'react';
import { WhiteSpace ,Button,Badge,Flex,Drawer ,ListView, List} from 'antd-mobile';
import {   View,Text,Navigator,StyleSheet,FlatList } from 'react-native';
import { province } from 'antd-mobile-demo-data';
const { Item } = List;
const {IndexedList} = ListView;

export default class ProfileScreen extends React.Component {
    constructor(props) {
        super(props);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        const dataBlob = {};
        const sectionIDs = [];
        const rowIDs = [];
        Object.keys(province).forEach((item, index) => {
            sectionIDs.push(item);
            dataBlob[item] = item;
            rowIDs[index] = [];

            province[item].forEach((jj) => {
                rowIDs[index].push(jj.value);
                dataBlob[jj.value] = jj.label;
            });
        });
        this.state = {
            open: true,
            dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
            headerPressCount: 0,
            data : [
                {key: 'Devin'},
                {key: 'Jackson'},
                {key: 'James'},
                {key: 'Joel'},
                {key: 'John'},
                {key: 'Jillian'},
                {key: 'Jimmy'},
                {key: 'Julie'},
            ]
        }
    }
    static navigationOptions = ({ navigation }) => ({
        title: `this is ${navigation.state.params.user}`,
    });
    render() {
        return (
            <View style={styles.container}>
                    <Flex >
                        <Flex.Item  style={{flex : 1}}>
                            <IndexedList
                                dataSource={this.state.dataSource}
                                renderHeader={() => <Text>custom header</Text>}
                                renderFooter={() => <Text>custom footer</Text>}
                                renderSectionHeader={sectionData => (<Text className="ih">{sectionData}</Text>)}
                                renderRow={rowData => (<Item><Text>{rowData}</Text></Item>)}
                                className="fortest"
                                style={{
                                    height: '300',
                                    overflow: 'auto',
                                }}
                                quickSearchBarStyle={{
                                    position: 'absolute',
                                    top: 20,
                                }}
                                delayTime={10}
                                delayActivityIndicator={<Text style={{ padding: 25, textAlign: 'center' }}>rendering...</Text>}
                            />
                        </Flex.Item>
                        <Flex.Item style={{flex : 4}}>
                            <View style={styles.container}>
                                <FlatList
                                    data={this.state.data}
                                    renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
                                />
                            </View>

                        </Flex.Item>
                    </Flex>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
    }
});
